<template>
	<view class="page">
		<view class="box_1">
			<!-- 搜索栏区域 -->
			<view class="search-bar">
				<view class="search-input">
					<icon class="search-icon" type="search" size="14" @click="search"></icon>
					<input class="search-placeholder" v-model="text" />
				</view>
			</view>

			<!-- 热搜区域 -->
			<view class="hot-search-container">
				<text class="hot-search-label">热搜：</text>
				<view class="hot-search-tags">
					<text class="hot-search-tag">蔬菜</text>
					<text class="hot-search-tag">土豆砂锅</text>
					<text class="hot-search-tag">限时秒杀</text>
					<text class="hot-search-tag">麻辣香锅</text>
				</view>
			</view>

			<!-- 横幅广告区域 -->
			<view class="banner-ad">
				<swiper style="height: 600rpx;" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}">
					<swiper-item v-for="item in arr1" :key="item.bannerid">
						<image :src="item.img" mode="widthFix" style="width:765rpx;" />
					</swiper-item>
				</swiper>
			</view>

			<!-- 分类图标区域 -->
			<view class="category-icons">
				<view class="category-item" v-for="navItem in arr2" :key="navItem.id">
					<view class="category-icon">
						<image :src="navItem.icon" mode="aspectFit"></image>
					</view>
					<text class="category-name">{{navItem.title}}</text>
				</view>
			</view>

			<!-- 商品列表区域 -->
			<view class="product-section">
				<view class="section-title">
					<text>精选商品</text>
				</view>
				<view class="product-list">
					<view class="product-item" v-for="iitem in arr3" :key="iitem.proid" @click="golist(iitem)">
						<view class="product-image">
							<image :src="iitem.img1"></image>
						</view>
						<view class="product-info">
							<text lines="2" class="product-name">{{iitem.proname}}</text>
							<view class="product-price-sales">
								<view class="product-price">
									<text class="price-text">¥{{iitem.originprice}}</text>
								</view>
								<text class="sales-text">已售{{iitem.sales}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	let arr3 = ref([]);
	let arr2 = ref([]);
	let arr1 = ref([]);
	let text = ref("")
	onLoad((option) => {
		listFn();
		menulist();
		banner()
	})
	const banner = () => {
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/banner/list",
			method: "GET",
			success: (res) => {
				console.log(res.data.data)
				arr1.value = res.data.data
			}
		})
	}
	const listFn = () => {
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/pro/list",
			method: "GET",
			data: {
				count: 1,
				limitNum: 10
			},
			success: (res) => {
				console.log(res.data.data)
				arr3.value = res.data.data
			}
		})
	}
	const menulist = () => {
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/menu/list",
			method: "GET",
			success: (res) => {
				console.log(res.data.data)
				arr2.value = res.data.data
			}
		})
	}

	function golist(evt) {
		console.log(evt.proid)
		uni.navigateTo({
			url: "/pages/listxq/listxq?proid=" + evt.proid
		})
	}

	function search() {
		console.log(text.value)
		uni.navigateTo({
			url: "/pages/search/search?str=" + text.value
		})

	}
</script>
<style>
	.page {
		position: relative;
		width: 750rpx;
		min-height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.box_1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		position: relative;
	}

	/* 搜索栏样式 */
	.search-bar {
		padding: 15rpx;
		background-color: #4caf50;
	}

	.search-input {
		background-color: white;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.search-icon {
		color: #999;
		margin-right: 10rpx;
	}

	.search-placeholder {
		font-size: 26rpx;
		color: #999;
		flex: 1;
	}

	/* 热搜区域样式 */
	.hot-search-container {
		padding: 15rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.hot-search-label {
		font-size: 24rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.hot-search-tags {
		display: flex;
		overflow-x: scroll;
		padding: 5rpx 0;
	}

	.hot-search-tag {
		font-size: 24rpx;
		color: #666;
		padding: 5rpx 15rpx;
		margin-right: 15rpx;
		background-color: #f0f0f0;
		border-radius: 15rpx;
		white-space: nowrap;
	}

	/* 横幅广告样式 */
	.banner-ad {
		position: relative;
		width: 100%;
		height: 500rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.banner-ad image {
		width: 100%;
		height: 100%;
	}


	/* 分类图标样式 */
	.category-icons {
		background-color: white;
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.category-item {
		width: 140rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.category-icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	.category-icon image {
		width: 60rpx;
		height: 60rpx;
	}

	.category-name {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}

	/* 商品列表样式 */
	.product-section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}

	.section-title {
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		border-bottom: 1rpx solid #eee;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.product-item {
		width: 360rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.product-image {
		width: 100%;
		height: 280rpx;
		overflow: hidden;
	}

	.product-image image {
		width: 100%;
		height: 100%;
		transition: transform 0.3s;
	}

	.product-image:hover image {
		transform: scale(1.05);
	}

	.product-info {
		padding: 15rpx;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-stock {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.product-price-sales {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		color: #e60012;
		font-weight: bold;
	}

	.price-text {
		font-size: 30rpx;
	}

	.sales-text {
		font-size: 22rpx;
		color: #999;
	}
</style>